<!DOCTYPE html>
<html>
  <head>
    <title>Travel modes in directions</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script src="script-tags-for-development.js"></script>
    <style>
      html, body {width:100%; height: 100%; padding:0; margin: 0}
      body {padding: 5px}
      * { box-sizing: border-box; }
    </style>
    <script>
      angular.module('ngMap').run(function($rootScope) {
        $rootScope.logLatLng = function(e) {
          console.log('loc', e.latLng);
        }
        $rootScope.wayPoints = [
          {location: {lat:44.32384807250689, lng: -78.079833984375}, stopover: true},
          {location: {lat:44.55916341529184, lng: -76.17919921875}, stopover: true},
        ];
      });
    </script>
  </head>
  <body ng-app="ngMap">
    <div style="width: 68%; float:left; height: 100%">
      <b>Origin </b>
      <select ng-model="origin" ng-init="origin='toronto'">
        <option value="toronto">Toronto</option>
        <option value="ottawa">Ottawa</option>
        <option value="montreal">Montreal</option>
      </select>

      <b>Destionation </b>
      <select ng-model="destination" ng-init="destination='ottawa'">
        <option value="toronto">Toronto</option>
        <option value="ottawa">Ottawa</option>
        <option value="montreal">Montreal</option>
      </select>

      <b>Mode of Travel: </b>
      <select ng-model="travelMode" ng-init="travelMode='DRIVING'">
        <option value="DRIVING">Driving</option>
        <option value="WALKING">Walking</option>
        <option value="BICYCLING">Bicycling</option>
        <option value="TRANSIT">Transit</option>
      </select>

      <ng-map zoom="14" id="my-map" center="37.7699298, -122.4469157" style="height:90%" on-click="logLatLng()" >
        <directions 
          draggable="true"
          panel="directions-panel"
          travel-mode="{{travelMode}}"
          waypoints="{{wayPoints}}"
          origin="{{origin}}"
          destination="{{destination}}">
        </directions>
      </ng-map> 
      Directions path length:
        {{map.directionsRenderers[0].directions.routes[0].overview_path.length}}
    </div>

    <div id="directions-panel" style="width: 28%; float:left; height: 100%; overflow: auto; padding: 0px 5px">
    </div>
  </body>
</html>
